<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
	<view class="layout" v-show="!showLoading">
		<cu-custom :isBack="true" :isHome="true" background="rgba(226, 226, 226, 0.1)" :needFill="true">
			<block slot="content">地址管理</block>
		</cu-custom>
		
		<!-- 商品列表 -->
		<view class="address-list" v-if="addressObj.length>=1" v-for="(item, index) in addressObj" :key="item.index" @click="selectAddress(index)">
			<view class="address-box">
				<!-- 左边的选择框 -->
				
				<view class="address-select" v-if="selectedIndex === index">
					✔
				</view>
				
				<view class="address-left-of">
				<!-- 标题 -->
				<view class="address-title">
					<view class="address-left">{{ item.contact }} {{ item.telephone }}</view>
					<view class="address-icon" v-if="item.is_default===1">默认</view>
				</view>
				
				<!-- 内容 -->
				<view class="address-content">
					<view class="address-sss">{{ item.province }} {{ item.city }} {{ item.district }}</view>
					<view class="address-dec">{{ item.address }}</view>
				</view>
			</view>
		</view>
			<!-- icon -->
			<!-- iocn -->
			<view class="address-right-icon">
				<up-icon @click="editAddress(1,item.id)" name="edit-pen" color="#333333" size="28"></up-icon>
			</view>
		</view>
		<!-- 123 -->
		<view class="address-list-empy" v-else>
			<up-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png"></up-empty>
		</view>
		
		
		<!-- 新建 -->
		<view class="address_add">
			<view class="address_add_a" @click="addAddress">新建收货地址</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { onLoad,onShareAppMessage,onShareTimeline, } from '@dcloudio/uni-app'
	import request from '../../common/request';
	// 加载动画
	const showLoading = ref(true)
	
	onMounted(() => {
		setTimeout(() => {
			showLoading.value = false;
		}, 1000);
	});

	
	// 方法
	function addAddress(){
		uni.navigateTo({
			url:'/pages/addres_edit/addres_edit'
		})
	}
	//编辑
	 function editAddress(e,d){
		 uni.navigateTo({
		 	url:'/pages/addres_edit/addres_edit?edit='+e+'&id='+d
		 })
		 console.log(e,d)
	 }
	// 本地的数据
	const addressObj = ref({
	  contact: '',
	  telephone: '',
	  province_id: '',
	  city_id: '',
	  district_id: '',
	  address: '',
	  uid: 0,
	  is_default: Boolean(0),
	});
	
	const region = ref('')
	const getAddressList = () => {
	 // 获取 uid
	 const uid = uni.getStorageSync('uid')
	  uni.request({
	    url: request.baseUrl+`ua-lists?uid=`+ uid,
	    method: 'GET',
	    success: (res) => {
	    console.log(res)
		addressObj.value = res.data.data
		console.log("得到",addressObj.value)
		console.log("code的",uid)
	    },
	    fail: (error) => {
	      console.error('请求失败:', error);
	    }
	  });
	};
	
	
onMounted(()=>{
	getAddressList()
})
	
	

// 被点击时
 const selectedIndex = ref(null); // 用于记录被点击的地址索引

    // 选择地址
    const selectAddress = (index) => {
      selectedIndex.value = index; // 更新被选中的地址索引
    };

</script>

<style scoped lang="scss">
	.layout {
		padding: 0 0 140rpx 0;
		height: 100vh;
		background: #f7f7f7;
		.address_add {
			width: 750rpx;
			height: 146rpx;
			// border: 1px solid red;
			position: fixed;
			bottom: 0;
			
			.address_add_a {
				width: 690rpx;
				height: 88rpx;
				line-height: 88rpx;
				// border: 1px solid red;
				border-radius: 50rpx;
				margin: 20rpx 30rpx 0 20rpx;
				box-sizing: border-box;
				padding: 0 256rpx 0 255rpx;
				font-size: 30rpx;
				color: #ffffff;
				background: #18288f;
			}
		}
		
		// 列表
		.address-list {
			width: 710rpx;
			height: 210rpx;
			line-height: 210rpx;
			// line-height: 210rpx;
			border: 1px solid #ffffff;
			margin: 15rpx 20rpx 0 20rpx;
			border-radius: 20rpx;
			background: #ffffff;
			display: flex;
			
			.address-box {
				width: 500rpx;
				height: 130rpx;
				line-height: 130rpx;
				// border: 1px solid red;
				margin: 50rpx 0 35rpx 40rpx;
				background: #ffffff;
				display: flex;
				
				// 选择的方式
				.address-select {
					width: 34rpx;
					height: 34rpx;
					background: #6ad6f5;
					color: #ffffff;
					border-radius: 34rpx;
					line-height: 34rpx;
					margin: 50rpx 10rpx 0 0;
					
				}
				
				
				.address-left-of {
				// border: 1px solid red;
				margin: 0 0 0 0;
				
				.address-title {
					width: 451rpx;
					height: 40rpx;
					line-height: 40rpx;
					// border: 1px solid red;
					color: #222222;
					font-size: 30rpx;
					font-weight: 800;
					display: flex;
					
					.address-left {
						width: 278rpx;
						height: 40rpx;
						line-height: 40rpx;
						overflow: hidden;
						/* 隐藏超出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
					}
					
					.address-icon {
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #f0f9f6;
						color: #6ad6f5;
						box-sizing: border-box;
						padding: 4rpx 16rpx 0 14rpx;
						font-size: 24rpx;
						margin-left: 50rpx;
					}
				}
				
				
				.address-content {
					width: 451rpx;
					height: 75rpx;
					line-height: 75rpx;
					font-size: 28rpx;
					color: #666666;
					
					.address-sss {
						width: 451rpx;
						height: 37rpx;
						line-height: 37rpx;
					}
					.address-dec {
						width: 451rpx;
						height: 37rpx;
						line-height: 37rpx;
						overflow: hidden;
						/* 隐藏超出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
					}
				}
				
				}
			}
			
			// 右边
			.address-right-icon {
				width: 36rpx;
				height: 36rpx;
				margin: 70rpx 43rpx 0 89rpx;
			}
		}
	}
</style>
